
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} from 'react-native';
const MiddleData = require('./MiddleData.json');
export default class MineMiddleView extends Component {
  render() {
    return (
      <View style={styles.container}>
        {this.renderAllItem()}
      </View>
    );
  }
  renderAllItem(){
  	var itemArr = [];
  	for(var i=0; i<MiddleData.length;i++){
  		var data = MiddleData[i];
  		itemArr.push(<InnerView key={i} iconName={data.iconName} title={data.title}/>);
  	}
  	return itemArr;
  }
}

class InnerView extends Component{
	render(){
		return(
			<View style={styles.innerViewStyle}>
				<Image source={{uri:this.props.iconName}} style={{width:33,height:24}}/>
				<Text>{this.props.title}</Text>
			</View>
		);
	}
}
const styles = StyleSheet.create({
	innerViewStyle:{
		justifyContent:'center',
		alignItems: 'center',
	},
  container: {
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-around',
    backgroundColor:'#fff',
    padding:10,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
